﻿<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="~/Content/css/framework-font.css" rel="stylesheet" />
    <link href="~/Content/css/framework-ui.css" rel="stylesheet" />
    <script src="~/Content/js/jquery/jquery-2.1.1.min.js"></script>
    <link href="~/Content/css/framework-theme.css" rel="stylesheet" />
    <link href="~/Content/js/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Content/css/framework-theme.css" rel="stylesheet" />
    <script src="~/Content/js/charts/Chart.js"></script>
    @*<script src="~/Content/js/echarts/echarts.js"></script>*@
    <script src="/Content/js/echarts421/echarts.min.js"></script>
    <script>
        $(function () {
            GetSalaryChart();
            GetLeaveChart();
        });
        function GetSalaryChart() {
            var randomScalingFactor = function () { return Math.round(Math.random() * 100) };
            var arrDisplayMonth = $("#displayMonth").val().split(",");
            //var arrDiningCountByMonth = $("#diningCountByMonth").val().split(",");
            var arrFaceCountByMonth = $("#faceCountByMonth").val().split(",");
            var lineChartData = {
                labels: arrDisplayMonth,
                datasets: [
                    @*{
                        label: "刷卡",
                        fillColor: "rgba(220,220,220,0.2)",
                        strokeColor: "rgba(220,220,220,1)",
                        pointColor: "rgba(220,220,220,1)",
                        pointStrokeColor: "#fff",
                        pointHighlightFill: "#fff",
                        pointHighlightStroke: "rgba(220,220,220,1)",
                        data: arrDiningCountByMonth
                    },*@
                    {
                        label: "识别",
                        fillColor: "rgba(151,187,205,0.2)",
                        strokeColor: "rgba(151,187,205,1)",
                        pointColor: "rgba(151,187,205,1)",
                        pointStrokeColor: "#fff",
                        pointHighlightFill: "#fff",
                        pointHighlightStroke: "rgba(151,187,205,1)",
                        data: arrFaceCountByMonth
                    }
                ]
            }
            var ctx = document.getElementById("salarychart").getContext("2d");
            window.myLine = new Chart(ctx).Line(lineChartData, {
                responsive: false,
                bezierCurve: false
            });
        }
        function GetLeaveChart() {
            var randomScalingFactor = function () { return Math.round(Math.random() * 100) };
            var arrFaceCountByDay = $("#faceCountByDay").val().split(",");
            var a_value = arrFaceCountByDay[arrFaceCountByDay.length-1];
            var b_value = 0;
            var c_value = 0;
            var d_value = 0;
            var e_value = 0;
            var doughnutData = [
                {
                    value: a_value,
                    color: "#F7464A",
                    highlight: "#FF5A5E",
                    label: "新城"
                },
                {
                    value: b_value,
                    color: "#46BFBD",
                    highlight: "#5AD3D1",
                    label: "北山"
                },
                {
                    value: c_value,
                    color: "#FDB45C",
                    highlight: "#FFC870",
                    label: "西凤凰台"
                },
                {
                    value: d_value,
                    color: "#949FB1",
                    highlight: "#A8B3C5",
                    label: "书香"
                },
                {
                    value: b_value,
                    color: "#4D5360",
                    highlight: "#5AD3D1",
                    label: "双龙"
                },
            ];
            var ctx = document.getElementById("leavechart").getContext("2d");
            window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, { responsive: false });
            $("#a_value").html(a_value + "");
            $("#b_value").html(b_value + "");
            $("#c_value").html(c_value + "");
            $("#d_value").html(d_value + "");
            $("#e_value").html(e_value + "");
        }


    </script>
</head>
<body>
    <div id="areascontent">
        <div class="rows" style="margin-bottom: 1%; border: 1px solid #e6e6e6; overflow: hidden; padding-left: 1px;">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <i class="fa fa-line-chart fa-lg" style="padding-right: 5px;"></i>当前数据
                    <input type="hidden" id="displayMonth" value="@ViewBag.Display.DisplayMonth" />
                    @*<input type="hidden" id="diningCountByMonth" value="@ViewBag.Display.DiningCountByMonth" />*@
                    <input type="hidden" id="faceCountByMonth" value="@ViewBag.Display.FaceCountByMonth" />
                    <div style="float: right; position: relative; top: -4px; right: 0px;">
                        <iframe name="weather_inc" src="http://i.tianqi.com/index.php?c=code&id=1" width="330" height="35" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
                    </div>
                </div>
                <div class="panel-body">
                    <div class="dashboard-stats">
                        <div class="dashboard-stats-item" style="background-color: #fc8675;">
                            <h2 class="m-top-none">@ViewBag.Display.ResidentCount</h2>
                            <h5>注册居民</h5>
                            <div class="stat-icon">
                                <i class="fa fa-user fa-3x"></i>
                            </div>
                        </div>
                    </div>
                    <div class="dashboard-stats">
                        <div class="dashboard-stats-item" style="background-color: #6bafbd;">
                            <h2 class="m-top-none">@ViewBag.Display.FaceRecordDay</h2>
                            <h5>本日就餐</h5>
                            <div class="stat-icon">
                                <i class="fa fa-hdd-o fa-3x"></i>
                            </div>
                        </div>
                    </div>
                    <div class="dashboard-stats">
                        <div class="dashboard-stats-item" style="background-color: #f3ce85;">
                            <h2 class="m-top-none">@ViewBag.Display.FaceTotalOnWeek</h2>
                            <h5>本周就餐</h5>
                            <div class="stat-icon">
                                <i class="fa fa-shopping-cart fa-3x"></i>
                            </div>
                        </div>
                    </div>
                    <div class="dashboard-stats">
                        <div class="dashboard-stats-item" style="background-color: #949FB1;">
                            <h2 class="m-top-none">@ViewBag.Display.FaceRecordMonth</h2>
                            <h5>本月就餐</h5>
                            <div class="stat-icon">
                                <i class="fa fa-gavel fa-3x"></i>
                            </div>
                        </div>
                    </div>
                    <div class="dashboard-stats">
                        <div class="dashboard-stats-item" style="background-color: #65cea7; margin-right: 0px;">
                            <h2 class="m-top-none">@ViewBag.Display.FaceRecordYear</h2>
                            <h5>本年就餐</h5>
                            <div class="stat-icon">
                                <i class="fa fa-truck fa-3x"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="rows" style="margin-bottom: 1%; overflow: hidden;">
            <div style="float: left; width: 69%;">
                <div style="height: 350px; border: 1px solid #e6e6e6; background-color: #fff;">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <i class="fa fa-area-chart fa-lg" style="padding-right: 5px;"></i>月度就餐次数
                            <div style="float: right">
                                <span style="font-weight: 500;"><i class="fa fa-square" style="color: #dcdcdc; font-size: 20px; padding-right: 5px; vertical-align: middle; margin-top: -3px;"></i>就餐次数</span>
                                @*<span style="margin-left: 10px; font-weight: 500;"><i class="fa fa-square" style="color: #97bbcd; font-size: 20px; padding-right: 5px; vertical-align: middle; margin-top: -3px;"></i>就餐记录</span>*@
                                </div>
                                </div>
                                <div class="panel-body" style="padding-bottom: 0px;">
                                    <canvas id="salarychart" style="height: 285px; width: 100%; padding-right: 10px;"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div style="float: right; width: 30%;">
                        <div style="height: 350px; border: 1px solid #e6e6e6; background-color: #fff;">
                            <div class="panel panel-default">
                                <div class="panel-heading"><i class="fa fa-pie-chart fa-lg" style="padding-right: 5px;"></i>各食堂今日就餐次数</div>
                                <div class="panel-body" style="padding-top: 20px;">
                                    <canvas id="leavechart" style="height: 160px; width: 100%;"></canvas>
                                    <div style="text-align: center; padding-top: 20px;">
                                        <span><i class="fa fa-square" style="color: #F7464A; font-size: 20px; padding-right: 5px; vertical-align: middle; margin-top: -3px;"></i>新城</span>
                                        <span style="margin-left: 10px;"><i class="fa fa-square" style="color: #46BFBD; font-size: 20px; padding-right: 5px; vertical-align: middle; margin-top: -3px;"></i>北山</span>
                                        <span style="margin-left: 10px;"><i class="fa fa-square" style="color: #FDB45C; font-size: 20px; padding-right: 5px; vertical-align: middle; margin-top: -3px;"></i>西凤凰台</span>
                                        <span style="margin-left: 10px;"><i class="fa fa-square" style="color: #949FB1; font-size: 20px; padding-right: 5px; vertical-align: middle; margin-top: -3px;"></i>书香</span>
                                        <span style="margin-left: 10px;"><i class="fa fa-square" style="color: #4D5360; font-size: 20px; padding-right: 5px; vertical-align: middle; margin-top: -3px;"></i>双龙</span> 
                                    </div>
                                    <div style="margin-top: 20px; padding-top: 18px; padding-left:90px;height: 60px; border-top: 1px solid #e6e6e6;">
                                        <div style="width: 16%; text-align: center; float: left;">
                                            <span id="a_value"></span>
                                            <p style="color: #a1a1a1">新城</p>
                                        </div>
                                        <div style="width: 16%; text-align: center; float: left;">
                                            <span id="b_value"></span>
                                            <p style="color: #a1a1a1">北山</p>
                                        </div>
                                        <div style="width: 16%; text-align: center; float: left;">
                                            <span id="c_value"></span>
                                            <p style="color: #a1a1a1">西凤凰台</p>
                                        </div>
                                        <div style="width: 16%; text-align: center; float: left;">
                                            <span id="d_value"></span>
                                            <p style="color: #a1a1a1">书香</p>
                                        </div>
                                        <div style="width: 16%; text-align: center; float: left;">
                                            <span id="e_value"></span>
                                            <p style="color: #a1a1a1">双龙</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="rows" style="overflow: hidden;">
                    <div style="float: left; width: 34%; margin-right: 1%;">
                        <div style="height: 265px; border: 1px solid #e6e6e6; background-color: #fff;">
                            <div class="panel panel-default">
                                <div class="panel-heading"><i class="fa fa-thumbs-o-up fa-lg" style="padding-right: 5px;"></i>本周就餐总次数</div>
                                <input type="hidden" id="displayDay" value="@ViewBag.Display.DisplayDay" />
                                <input type="hidden" id="faceCountByDay" value="@ViewBag.Display.FaceCountByDay" />
                                <div class="panel-body" id="echart1" style="height:225px;"></div>
                                <script type="text/javascript">
                                    var dom = document.getElementById("echart1");
                                    var myChart = echarts.init(dom);
                                    var arrDisplayDay = $("#displayDay").val().split(",");
                                    var arrFaceCountByDay = $("#faceCountByDay").val().split(",");
                                    var app = {};
                                    option = null;
                                    app.title = '识别数量';

                                    option = {
                                        color: ['#3398DB'],
                                        tooltip: {
                                            trigger: 'axis',
                                            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                                                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                                            }
                                        },
                                        grid: {
                                            left: '3%',
                                            right: '4%',
                                            bottom: '3%',
                                            top: '3%',
                                            containLabel: true
                                        },
                                        xAxis: [
                                            {
                                                type: 'category',
                                                axisLabel: {//坐标轴刻度标签的相关设置。
                                                    interval: 0,
                                                    rotate: "45"
                                                },
                                                data: arrDisplayDay,
                                                axisTick: {
                                                    alignWithLabel: false
                                                }

                                            }
                                        ],
                                        yAxis: [
                                            {
                                                type: 'value'
                                            }
                                        ],
                                        series: [
                                            {
                                                name: '识别数量',
                                                type: 'bar',
                                                barWidth: '60%',
                                                data: arrFaceCountByDay
                                            }
                                        ]
                                    };
                                    ;
                                    if (option && typeof option === "object") {
                                        myChart.setOption(option, true);
                                    }
                                </script>
                            </div>
                        </div>
                    </div>
                    <div style="float: left; width: 34%; margin-right: 1%;">
                        <div style="height: 265px; border: 1px solid #e6e6e6; background-color: #fff;">
                            <div class="panel panel-default">
                                <div class="panel-heading"><i class="fa fa-rss fa-lg" style="padding-right: 5px;"></i>本周就餐次数排行</div>
                                <div class="panel-body" id="echart2" style="height:225px;"></div>
                                <input type="hidden" id="faceTotalOnWeek" value="@ViewBag.Display.FaceTotalOnWeek" />
                                <script type="text/javascript">
                                    var dom = document.getElementById("echart2");
                                    var myChart = echarts.init(dom);
                                    var app = {};
                                    option = null;
                                    app.title = '';
                                    var xcTotal = parseInt($("#faceTotalOnWeek").val());
                                    var option = {
                                        dataset: {
                                            source: [
                                                ['数量', ''],
                                                [0, '双龙'],
                                                [0, '书香'],
                                                [0, '西凤凰台'],
                                                [0, '北山'],
                                                [xcTotal, '新城']
                                            ]
                                        },
                                        tooltip: {
                                            trigger: 'axis',
                                            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                                                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                                            }
                                        },
                                        xAxis: { name: '数量' },
                                        yAxis: {
                                            type: 'category',
                                            axisLabel: {//坐标轴刻度标签的相关设置。
                                                interval: 0,
                                                rotate: "45"
                                            },
                                        },

                                        grid: {
                                            left: '3%',
                                            right: '4%',
                                            bottom: '3%',
                                            top: '3%',
                                            containLabel: true
                                        },
                                        series: [
                                            {
                                                type: 'bar',
                                                encode: {
                                                    // Map the "amount" column to X axis.
                                                    x: '数量',
                                                    // Map the "product" column to Y axis
                                                    y: '食堂'
                                                }
                                            }
                                        ]
                                    };
                                    if (option && typeof option === "object") {
                                        myChart.setOption(option, true);
                                    }
                                </script>
                            </div>
                        </div>
                    </div>
                    <div style="float: right; width: 30%;">
                        <div style="height: 265px; border: 1px solid #e6e6e6; background-color: #fff;">
                            <div class="panel panel-default">
                                <div class="panel-heading"><i class="fa fa-send fa-lg" style="padding-right: 5px;"></i>本月满意度</div>
                                <input type="hidden" id="satisfactionByMonth" value="@ViewBag.Display.SatisfactionByMonth" />
                                <div class="panel-body" id="echart3" style="height:225px;"></div>
                                <script type="text/javascript">
                                    var dom = document.getElementById("echart3");
                                    var satisfactionByMonth = $("#satisfactionByMonth").val().split("-");
                                    var arrCount = new Array();
                                    var arrSatisfaction = new Array();
                                    for (x in satisfactionByMonth) {
                                        var temp = satisfactionByMonth[x].split(",");
                                        arrCount[x] = temp[0];
                                        arrSatisfaction[x] = temp[1];
                                    }
                                    var myChart = echarts.init(dom);
                                    var app = {};
                                    option = null;
                                    app.title = '';

                                    option = {
                                        backgroundColor: '#fff',

                                        title: {
                                            text: '',
                                            left: 'center',
                                            top: 20,
                                            textStyle: {
                                                color: '#000'
                                            }
                                        },

                                        tooltip: {
                                            trigger: 'item',
                                            formatter: "{a} <br/>{b} : {c}"
                                        },
                                        series: [
                                            {
                                                name: '满意度',
                                                type: 'pie',
                                                radius: '70%',
                                                center: ['50%', '50%'],
                                                data: [{ value: arrCount[0], name: arrSatisfaction[0] },
                                                    { value: arrCount[1], name: arrSatisfaction[1] },
                                                    { value: arrCount[2], name: arrSatisfaction[2] }].sort(function (a, b) { return a.value - b.value; }),
                                                roseType: 'radius',
                                                label: {
                                                    normal: {
                                                        textStyle: {
                                                            color: 'rgba(0, 0, 0)'//字体
                                                        }
                                                    }
                                                },
                                                labelLine: {
                                                    normal: {
                                                        lineStyle: {
                                                            color: 'rgba(255, 255, 255, 0.3)'
                                                        },
                                                        smooth: 0.2,
                                                        length: 10,
                                                        length2: 20
                                                    }
                                                },
                                                itemStyle: {
                                                    normal: {
                                                        color: '#c23531',
                                                        shadowBlur: 200,
                                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                                    }
                                                },

                                                animationType: 'scale',
                                                animationEasing: 'elasticOut',
                                                animationDelay: function (idx) {
                                                    return Math.random() * 200;
                                                }
                                            }
                                        ]
                                    };
                                    if (option && typeof option === "object") {
                                        myChart.setOption(option, true);
                                    }
                                </script>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <style>
                #copyrightcontent {
                    height: 30px;
                    line-height: 29px;
                    overflow: hidden;
                    position: absolute;
                    top: 100%;
                    margin-top: -30px;
                    width: 100%;
                    background-color: #fff;
                    border: 1px solid #e6e6e6;
                    padding-left: 10px;
                    padding-right: 10px;
                }

                .dashboard-stats {
                    float: left;
                    width: 20%;
                }

                .dashboard-stats-item {
                    position: relative;
                    overflow: hidden;
                    color: #fff;
                    cursor: pointer;
                    height: 105px;
                    margin-right: 25px;
                    margin-bottom: 10px;
                    padding: 20px 20px;
                }

                    .dashboard-stats-item .m-top-none {
                        margin-top: 2px;
                    }

                    .dashboard-stats-item h2 {
                        font-size: 35px;
                        font-family: inherit;
                        line-height: 1.1;
                        font-weight: 500;
                    }

                    .dashboard-stats-item h5 {
                        font-size: 14px;
                        font-family: inherit;
                        margin-top: 3px;
                        line-height: 1.1;
                    }


                    .dashboard-stats-item .stat-icon {
                        position: absolute;
                        top: 10px;
                        right: 10px;
                        font-size: 30px;
                        opacity: .3;
                    }

                .dashboard-stats i.fa.stats-icon {
                    width: 50px;
                    padding: 20px;
                    font-size: 50px;
                    text-align: center;
                    color: #fff;
                    height: 50px;
                    border-radius: 10px;
                }

                .panel-default {
                    border: none;
                    border-radius: 0px;
                    margin-bottom: 0px;
                    box-shadow: none;
                    -webkit-box-shadow: none;
                }

                    .panel-default > .panel-heading {
                        color: #777;
                        background-color: #fff;
                        border-color: #e6e6e6;
                        padding: 10px 10px;
                    }

                    .panel-default > .panel-body {
                        padding: 10px;
                        padding-bottom: 0px;
                    }

                        .panel-default > .panel-body ul {
                            overflow: hidden;
                            padding: 0;
                            margin:0px;margin-top: -5px;
                        }

                            .panel-default > .panel-body ul li {
                                line-height: 27px;
                                list-style-type: none;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                            }

                                .panel-default > .panel-body ul li .time {
                                    color: #a1a1a1;
                                    float: right;
                                    padding-right: 5px;
                                }
            </style>
        </body>
        </html>
